<template>
  <view class="com-page">
    <scroll-view
      class="swiper-scroll"
      scroll-y="true"
      @scrolltolower="scrolltolower"
    >
      <view class="submit-wrap" v-if="state.submit.list.length > 0">
        <view
          class="submit-list"
          v-for="(item, index) in state.submit.list"
          :key="index"
        >
          <view class="text">{{ item.text }}</view>
        </view>
        <view class="no-more" v-if="!state.submit.finished">加载中</view>
        <view class="no-more" v-else>没有更多了</view>
      </view>
      <tt-empty
        :empty="state.empty"
        v-if="state.ready && state.submit.list.length == 0"
      ></tt-empty>
    </scroll-view>

    <tt-loading
      :ready="state.ready"
      :type="2"
      color="rgba(0,0,0,0.6)"
      top="15%"
    ></tt-loading>
  </view>
</template>
<script setup lang="ts">
/**
 * 模块引入
 */
import { reactive, getCurrentInstance, onMounted, defineExpose } from "vue";
const { proxy } = getCurrentInstance();
import { tabList } from "@/mock/tab.ts";
/**
 * 接口
 */
/**
 * 父组件数据
 */
const props = defineProps({
  tab: {
    type: Object,
    default: {},
  },
});
/**
 * 数据
 */
const state = reactive({
  ready: false,
  submit: {
    page: 1,
    size: 10,
    list: [],
    loading: true,
    finished: false,
  },
  empty: {
    text: "暂无记录",
    btn: "返回首页",
    link: "/pages/home/index",
    isTabbar: true,
    height: "",
  },
});
/**
 * 初始方法
 */
onMounted(() => {
  console.log(props.tab);
  handleStyle();
});
/**
 * 功能方法
 */
const fetchList = () => {
  if (state.ready || state.submit.finished || !state.submit.loading) {
    return;
  }
  let params = {
    page: state.submit.page,
    rows: state.submit.size,
    value: props.tab.value,
  };
  state.submit.list = tabList[params.value] || [];
  state.submit.finished = true;
  state.ready = true;
};
const scrolltolower = () => {
  if (state.submit.finished) return;
  state.ready = false;
  state.submit.loading = true;
  state.submit.page++;
  fetchList();
};

const handleStyle = () => {
  const systemInfo = proxy.$config.systemInfo();
  let height = `calc(${systemInfo.windowHeight}px - ${proxy.$utils.rpx2px(
    92
  )}px)`;
  state.empty.height = height;
};
/**
 * 父组件方法
 * const emit = defineEmits(['function']);
 * emit('function', data);
 */
/**
 * 父组件传递生命周期方法
 * onShareAppMessage  分享好友
 * onShareTimeline 分享朋友圈
 * onReachBottom 页面内触底
 */
defineExpose({
  fetchList,
});
</script>
<style lang="scss" scoped>
@import url("@/static/css/theme.scss");
.com-page {
  width: 100%;
  height: 100%;
  background-color: #fefefe;
  .swiper-scroll {
    height: 100%;
    .submit-wrap {
      .submit-list {
        margin: 0 32rpx;
        padding: 32rpx 0;
        display: flex;
        justify-content: space-between;
        border-bottom: 1px solid #eee;
        .text {
          background: #ffffff;
          border-radius: 20rpx;
        }
      }
    }
  }
}
</style>
